export type ThemeItem = {
    default: string;
    dark?: string;
};

export type ThemeMode = 'default' | 'dark';

export class ColorConfig {
    color = {
        primary: {
            default: '#5085FF'
        } as ThemeItem,
        blue: {
            default: '#215FFF'
        } as ThemeItem,
        red: {
            default: '#F14B55'
        } as ThemeItem,
        green: {
            default: '#0AC083'
        } as ThemeItem,
        cyan: {
            default: '#0097B8'
        } as ThemeItem,
        orange: {
            default: '#FF8533'
        } as ThemeItem,
        // 自定义颜色(暗色选色可参考这个https://ant-design.antgroup.com/docs/spec/dark-cn)
        lightblue: {
            default: '#edf6ff',
            dark: '#000000' // 饱和度太低，在暗色模式会不好看，这里可以手动配置暗色模式颜色
        },
        bluetopurple: {
            default: 'linear-gradient(90deg, #489cea 0%, #8482ff 100%)',
            dark: '#000000'
        }
    };

    background = {
        front: {
            default: '#FFFFFF',
            dark: '#111111' // #000000黑色留给最上层面板
        },
        background: {
            default: '#F7F7F8',
            dark: '#1d1e1f'
        }
    };

    textColor = {
        text: {
            default: '#000000E0', // 标题颜色
            dark: '#FFFFFFD9' // 暗黑模式下的标题颜色
        },
        text1: {
            default: '#000000E0', // 一级文本颜色
            dark: '#FFFFFFD9' // 暗黑模式下的一级文本颜色
        },
        text2: {
            default: '#000000A6', // 二级文本颜色
            dark: '#FFFFFFA6' // 暗黑模式下的二级文本颜色
        },
        disabled: {
            default: '#00000040', // 禁用文本颜色
            dark: '#FFFFFF40' // 暗黑模式下的禁用文本颜色
        },
        border: {
            default: '#D9D9D9FF', // 主要边框颜色
            dark: '#424242FF' // 暗黑模式下的主要边框颜色
        },
        divider: {
            default: '#0505050F', // 分割线颜色
            dark: '#FDFDFD1F' // 暗黑模式下的分割线颜色
        }
    };

    text = {
        lg: '44rpx',
        base: '34rpx',
        sm: '30rpx',
        xs: '26rpx'
    };
}

/**
 * 此函数给uno.config.ts调用，位于vite打包周期内
 * @returns
 */
export const getUnocssRules = () => {
    const theme = new ColorConfig();
    const colorRules: [string, Record<string, string>][] = [];
    const themeColorKeys = Object.keys(
        theme.color
    ) as (keyof typeof theme.color)[];
    themeColorKeys.forEach((key) => {
        colorRules.push([
            `c-${camelToKebab(key)}`,
            {
                color: `var(--c-${camelToKebab(key)})`
            }
        ]);
    });
    const backgroundRules: [string, Record<string, string>][] = [];
    const themeBackgroundKeys = Object.keys(
        theme.background
    ) as (keyof typeof theme.background)[];
    themeBackgroundKeys.forEach((key) => {
        backgroundRules.push([
            `bg-${camelToKebab(key)}`,
            {
                'background-color': `var(--bg-${camelToKebab(key)})`
            }
        ]);
    });
    themeColorKeys.forEach((key) => {
        backgroundRules.push([
            `bg-${camelToKebab(key)}`,
            {
                'background-color': `var(--bg-${camelToKebab(key)})`
            }
        ]);
    });

    const textColorRules: [string, Record<string, string>][] = [];
    const themeTextColorKeys = Object.keys(
        theme.textColor
    ) as (keyof typeof theme.textColor)[];
    themeTextColorKeys.forEach((key) => {
        textColorRules.push([
            `c-${camelToKebab(key)}`,
            {
                color: `var(--c-${camelToKebab(key)})`
            }
        ]);
    });

    const textRules: [string, Record<string, string>][] = [];
    const themeTextKeys = Object.keys(
        theme.text
    ) as (keyof typeof theme.text)[];
    themeTextKeys.forEach((key) => {
        textRules.push([
            `text-${camelToKebab(key)}`,
            {
                'font-size': `var(--text-${camelToKebab(key)})`
            }
        ]);
    });
    const rules = [
        ...colorRules,
        ...backgroundRules,
        ...textColorRules,
        ...textRules
    ];
    return rules;
};

export const camelToKebab = (str: string) => {
    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
};
